<template>
	<view class="submit_order">
		<view class="order_h">
			<view class="left">
				<image src="https://img.js.design/assets/img/6767a9e2b30c45934aaa7bf4.png#78b7043eb76c6cdc8c6234c12b273cb7" mode="aspectFill"></image>
				<view>儿童书法课程</view>
			</view>
			<view class="right">
				<view>¥589.00</view>
				<view>x1</view>
			</view>
		</view>
		<view class="coneter">
			<view class="item">
				<view class="left">课程时间</view>
				<view class="right">2022.05.25-2022.06.30</view>
			</view>
			<view class="item">
				<view class="left">授课地点</view>
				<view class="right">北京天慧学习馆</view>
			</view>
			<view class="item">
				<view class="left">授课老师</view>
				<view class="right">李白</view>
			</view>
		</view>
		<view class="sulite">
			<view class="left">商品合计</view>
			<view class="sum">¥589.00</view>
		</view>
		<view class="sulite" style="margin-bottom: 15rpx;">
			<view class="left">运费</view>
			<view class="sum">¥589.00</view>
		</view>
		<view class="usefo_item">
			<view class="lbe">姓名：</view>
			<input type="text" placeholder="请输入......" placeholder-class="pacestye"/>
		</view>
		<view class="usefo_item">
			<view class="lbe">姓名：</view>
			<input type="text" placeholder="请输入......" placeholder-class="pacestye"/>
		</view>
		<view class="usefo_item">
			<view class="lbe">姓名：</view>
			<input type="text" placeholder="请输入......" placeholder-class="pacestye"/>
		</view>
		<view class="bt_itme">
			<view class="left">
				<view>合计：</view>
				<view>￥589.00</view>
			</view>
			<view class="btn">提交订单</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit_order{
		.order_h{
			display: flex;
			// align-items: center;
			padding: 40rpx 30rpx 0rpx;
			background-color: #fff;
			justify-content: space-between;
			.left{
				display: flex;
				image{
					width: 252.96rpx;
					height: 152.54rpx;
					opacity: 1;
					border-radius: 10rpx;
				}
				view{
					font-size: 32rpx;
					margin-left: 16rpx;
				}
			}
			.right{
				& view:nth-child(2){
					margin-top: 20rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
		}
		.coneter{
			// padding: 0rpx 30rpx;
			// margin: ;
			border-radius: 20rpx;
			margin-bottom: 5rpx;
			background: rgba(255, 255, 255, 1);
			padding: 20rpx 30rpx;
			// margin: 15rpx  auto 10rpx;
			.item{
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
				font-size: 28rpx;
				justify-content: space-between;
				.left{
					color: rgba(153, 153, 153, 1);
				}
			}
		}
		.sulite{
			height: 105.91rpx;
			opacity: 1;
			// margin-top: 5rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 25rpx;
			align-items: center;
			background: rgba(255, 255, 255, 1);
			border-bottom: 2rpx solid rgba(249, 249, 249, 1);
			width: 100%;
			font-size: 28rpx;
		}
		.usefo_item{
			height: 115.91rpx;
			opacity: 1;
			// margin-top: 5rpx;
			font-size: 28rpx;
			display: flex;
			// justify-content: space-between;
			padding: 0 25rpx;
			align-items: center;
			background: rgba(255, 255, 255, 1);
			border-bottom: 2rpx solid rgba(249, 249, 249, 1);
			width: 100%;
			input{
				margin-left: 20rpx;
			}
		}
		.bt_itme{
			width: 750rpx;
			height: 98rpx;
			opacity: 1;
			background: rgba(255, 255, 255, 1);
			position: fixed;
			bottom: 0%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 25rpx;
			.left{
				display: flex;
				align-items: center;
				flex: 1;
				& view:nth-child(2){
					color: rgba(249, 46, 46, 1);
					font-size: 46rpx;
				}
			}
			.btn{
				width: 272rpx;
				height: 98rpx;
				opacity: 1;
				background: linear-gradient(90deg, rgba(255, 134, 87, 1) 0%, rgba(250, 110, 30, 1) 100%);
				text-align: center;
				color: #fff;
				line-height: 98rpx;
			}
		}
	}
</style>